<template>
    <div class="tab-bar">
        <template v-for="(item, index) in menus" :key="item.path">
            <div @click="toPath(item.path)" v-if="item.path == '/publist'" class="tab-pub">
                <i class="iconfont icon-jiahao"></i>
            </div>
            <div @click="toPath(item.path)" v-else class="tab-name" :class="{ active: item.path == path }">{{ item.name
                }}</div>
        </template>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import routse from '@/router/routes'
//就是一整个路由 包含了 useRoute 和 useRouter
import router from '@/router'
import useHooks from '@/hooks/useHooks';
const {changeRefresh} = useHooks
const menus = routse
const path = ref('/')
const toPath = (p) => {
    if(path.value == p && p==='/'){
        changeRefresh(true)
    }
    router.push({
        path: p
    })
    path.value = p
}
//监听路由变化保证tabbar跟路由路径一致
watch(router.currentRoute.value.path, () => {
    path.value = router.currentRoute.value.path
})

</script>

<style lang="scss" scoped>
.tab-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3rem;
    @include flexac;
    background-color: #fff;
    font-size: .9rem;
    color: rgb(149, 149, 149);
    z-index: 999;

    .tab-name {
        min-width: 10%;
        text-align: center;
        transition: all .1s linear;

        &.active {
            font-size: 1rem;
            color: rgb(51, 51, 51);
            font-weight: bold;
        }
    }

    .tab-pub {
        width: 3.125rem;
        height: 70%;
        border-radius: 20%;
        background-color: rgb(255, 35, 66);
        @include flexcc;

        i {
            color: #fff;
            font-size: 1.5rem;
        }
    }
}
</style>